<template>
  <div class="about">
    <div class="land">
      <div class="contain">
        <div class="brief">
          <h1>Out Story</h1>
          Frontrock is a blockchain enabled platform allowing investors to
          invest real estate properties in fragments. We are trying to
          revolutionize the means and the tools in conventional real estate
          investment.
          <br />
          <br />
          During the real estate purchasing process, oftentimes there are a lot
          of restrictions on what you can do as a retail investor. Frontrock
          provides a one-stop solution for the “can-do” and lower the bars for
          “can’t-do”.
          <br />
          <br />
          We believe the Frontrock suite should have been built a long time ago,
          for the convenience of users, brokers, and the agents during the
          process. So welcome to Frontrock, and also welcome to the future of
          real estate.
        </div>
        <div class="mountain m"></div>
        <div class="brief founder">
          <h1>Founder Story</h1>
          In April 2021, Bryan Zhang and Jackie An proposed the idea of starting
          a company to help smaller retail investors to purchase real estate
          properties and proposed the idea of collateralized assets on chain.
          <br />
          <br />
          Their vision was big, with millions of retail investors in the back of
          their minds. Nonetheless, the success story of this will enable
          millions of people to be able to afford housing under a DAO
          (decentralized autonomous Operation). It will change things forever.
          <br />
          <br />
          FrontRock DEX was designed and is preparing for its launch in Q3 2021.
          It will open new ways of operation and opportunities for retail
          investors, operators and real estate associated entities beyond
          imagination.
        </div>
        <div class="mountain pc"></div>
        <div class="cloud"></div>
      </div>

      <div class="portrait">
        <div class="person">
          <div class="pic"></div>
          <p>Wesley Xia</p>
          <span>CEO</span>
        </div>
        <div class="person">
          <div class="pic"></div>
          <p>Wesley Xia</p>
          <span>CEO</span>
        </div>
        <div class="person">
          <div class="pic"></div>
          <p>Wesley Xia</p>
          <span>CEO</span>
        </div>
        <div class="person">
          <div class="pic"></div>
          <p>Wesley Xia</p>
          <span>CEO</span>
        </div>
        <div class="person">
          <div class="pic"></div>
          <p>Wesley Xia</p>
          <span>CEO</span>
        </div>
        <div class="person">
          <div class="pic"></div>
          <p>Wesley Xia</p>
          <span>CEO</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//   import tokensCard from './tokensCard'
export default {
  name: "about",
  data() {
    return {
      articles: [],
      state: "",
      timeout: null,
    };
  },
  components: {
    //   tokensCard
  },
  mounted() {
    console.log("about:", this)
  },
  methods: {
    routePath(i) {
      Bus.$emit("topbar", i)
    },
    salesBuy() {
      console.log(Date())
    },
  },
};
</script>


<style scoped="scoped" lang="scss">
.about {
  position: relative;
  text-align: center;
  // min-height: 400px;
  // margin: 50px auto 0 auto;
  // background: #EF6566;
  color: #fff;
  .land {
    font-family: Newsreader, serif;
    width: 100%;
    display: inline-block;
    .contain {
      // height: 660px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      @media screen and (max-width: 720px) {
        // height: 360px;
      }
      .brief {
        width: 560px;
        font-size: 16px;
        line-height: 25px;
        text-align: left;
        margin-bottom: 130px;
        h1 {
          text-align: center;
          font-size: 48px;
          font-weight: 900;
          line-height: 52px;
          margin-bottom: 60px;
        }
        &.founder {
          position: relative;
          &:after {
            content: "";
            background: url(../assets/land_page4_arrow.png) no-repeat;
            background-size: 100% auto;
            position: absolute;
            bottom: -80px;
            right: -200px;
            width: 200px;
            height: 140px;
            transform: rotateY(180deg);
            @media screen and (max-width: 720px) {
              bottom: -150px;
              right: 100px;
            }
          }
        }
        @media screen and (max-width: 720px) {
          width: 90%;
          // margin-top: 50px;
          margin-bottom: 40px;
          h1 {
            font-size: 36px;
            margin-bottom: 40px;
            margin-top: 80px;
          }
          &.founder {
            h1 {
              margin-top: 0;
            }
            margin-bottom: 160px;
          }
        }
      }
      .mountain {
        background: url(../assets/mountain.png) no-repeat;
        background-size: auto 100%;
        width: 60%;
        height: 500px;
        position: absolute;
        left: 0;
        top: 13%;
        @media screen and (max-width: 720px) {
          background-size: 95% auto;
          width: 100%;
          height: 267px;
          position: initial;
          left: initial;
          top: initial;
          // left: -50px;
          // right: -50px;
        }
      }
      .cloud {
        background: url(../assets/key_l.png) no-repeat;
        background-size: auto 100%;
        background-position: center 50%;
        width: 25%;
        height: 240px;
        position: absolute;
        top: -3%;
        right: 10%;
        @media screen and (max-width: 720px) {
          // left: -50px;
          // right: -50px;
          background-size: 100% auto;
          background-position: 0 0;
          height: 100px;
          width: 35%;
          top: 0%;
          right: 1%;
        }
      }
    }

    .portrait {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      // flex-direction: row;
      font-family: "Krona One", monospace;
      max-width: 1290px;
      flex-wrap: wrap;
      margin-bottom: 180px;
      .person {
        margin: 20px 60px 60px 60px;
        div {
          width: 200px;
          height: 200px;
          background: rgba(255, 255, 255, 0.2);
          margin-bottom: 15px;
        }
        p {
          font-size: 15px;
          margin: 0 0 5px 0;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            background: url(../assets/name_in.png) no-repeat;
            background-size: 100% auto;
            top: 0px;
            right: 19px;
            width: 19px;
            height: 20px;
          }
        }
        span {
          font-size: 12px;
        }
      }
    }

    .buttons {
      // width: 40%;
      padding: 80px 0;
      .start,
      .know-more {
        width: 240px;
        height: 40px;
        line-height: 35px;
        box-sizing: border-box;
        border: 2px solid #ef6566;
        box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
        border-radius: 44px;
        color: white;
        font-family: "Krona One", monospace;
        font-size: 14px;
        //   font-weight: bold;
        text-decoration: none;
        display: inline-block;
        margin: 0 8px;
        &.start {
          background: #ef6566;
          &:hover {
            filter: brightness(1.1);
          }
        }
        &.know-more {
          border: 1px solid;
          &:hover {
            background: rgba(239, 101, 102, 0.1);
            // background: #EF6566;
            // border: 1px solid transparent;
          }
        }
        @media screen and (max-width: 640px) {
          width: 90%;
          margin: 0;
        }
      }
    }
  }
}

@media only screen and (min-width: 1680px) {
  .order {
    font-size: 16px;
    font-weight: bold;
    color: white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r {
      font-size: 45px;
      em {
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}
@media only screen and (min-width: 1570px) and (max-width: 1680px) {
  .order {
    font-size: 16px;
    font-weight: bold;
    color: white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r {
      font-size: 45px;
      em {
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}

@media only screen and (min-width: 1440px) and (max-width: 1570px) {
  .order {
    font-size: 14px;
    font-weight: bold;
    color: white;
    position: absolute;
    right: 3%;
    top: 36%;
    .r {
      font-size: 38px;
      em {
        font-size: 15px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 21px;
    }
  }
}

@media only screen and (max-width: 1440px) {
  .order {
    font-size: 14px;
    font-weight: bold;
    color: white;
    position: absolute;
    right: 2%;
    top: 40%;
    .r {
      font-size: 30px;
      em {
        font-size: 14px;
        font-style: normal;
      }
    }
  }
}

@media only screen and (max-width: 720px) {
  .order {
    font-size: 14px;
    font-weight: bold;
    color: white;
    position: absolute;
    right: 2%;
    top: 0;
    .r {
      font-size: 30px;
      em {
        font-size: 14px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 16px;
      margin-left: 1px;
    }
  }
}

@media only screen and (max-width: 420px) {
  .order {
    top: 4px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 24px;
    }
    .btn {
      padding: 0.18em 0.6em 0.19em;
      font-size: 15px;
    }
  }
}
@media only screen and (max-width: 375px) {
  .order {
    top: 0px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}

@media only screen and (max-width: 360px) {
  .order {
    top: -1px;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}
</style>


<style lang="scss">
.about {
  .brief {
  }
}
</style>